<template>
    <div class="rrrrr">
      <div class="boxssss">
        <div class="chartssss" id="chart1"></div>
      </div>
      <div class="boxssss2">
        <div class="chartssss" id="chart2"></div>
      </div>
      <div class="boxssss3">
        <div class="chartssss" id="chart3"></div>
      </div>
    </div>
  </template>
    
    <script>
  // @ is an alias to /src
  import * as echarts from "echarts";
  
  export default {
    name: "rrrrr",
    mounted() {
      this.initChart1();
      this.initChart2();
      this.initChart3();
    },
    methods: {
      initChart1() {
        var chartDom = document.getElementById("chart1");
        var myChart = echarts.init(chartDom);
        var option = {
          title: {
            text: "XXXX",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: ["13:39", "13:44", "13:49", "13:59", "13:59", "14:04", "14:09"],
          },
          color: ['#2285E2'], // 深蓝色和黄色
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [66, 80, 122, 166, 159, 200, 300],
              type: "line",
              smooth: true,
            },
          ],
        };
        myChart.setOption(option);
      },
      initChart2() {
        var chartDom = document.getElementById("chart2");
        var myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "XXXX",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["今天", "昨天"],
            right: '10'

          },
          color: ['#2285E2','#FC943C'], // 深蓝色和黄色
  
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["00", "02", "04", "06", "08", "10", "12"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "今天",
              type: "line",
              stack: "Total",
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: "昨天",
              type: "line",
              stack: "Total",
              data: [220, 182, 191, 234, 290, 330, 310],
            },
          ],
        };
        myChart.setOption(option);
      },
      initChart3() {
        var chartDom = document.getElementById("chart3");
        var myChart = echarts.init(chartDom);
        var option = {
          title: {
            text: "XXXX",
          },
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category",
            data: ["07-01", "07-02", "07-03", "07-04", "07-05", "07-06", "07-07"],
          },
          color: ['#273AB5'], // 深蓝色和黄色
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: "bar",
              barWidth: 16,
              itemStyle: {
                barBorderRadius: [20, 20, 0, 0],
              },
            },
          ],
        };
        myChart.setOption(option);
      },
    },
  };
  </script>
    <style scoped>
  .rrrrr {
    background: url(../assets/tjjs.png) no-repeat top;
    background-size: cover;
    width: 100%;
    height: 1080px;
    position: relative;
  }
  .boxssss {
    width: 588px;
    height: 248px;
    border: 1px solid #d5d9e6;
    position: absolute;
    right: 50px;
    top: 200px;
    padding: 15px;
  }
  .boxssss2 {
    width: 588px;
    height: 248px;
    border: 1px solid #d5d9e6;
    position: absolute;
    right: 50px;
    top: 460px;
    padding: 15px;
  }
  .boxssss3 {
    width: 588px;
    height: 248px;
    border: 1px solid #d5d9e6;
    position: absolute;
    right: 50px;
    top: 720px;
    padding: 15px;
  }
  .chartssss {
    width: 100%;
    height: 248px;
  }
  </style>
    